@import '../global.config.less';
:local(.footer) {
  display: flex;
  flex-flow: row nowrap;
  margin: 0 auto;
  height: @footer_height;
  transition: .3s width linear;
  @media screen {
    @media (min-width: 1400px) {
      width: 800px;
    }
    @media (min-width: 860px) {
      @media (max-width: 1400px) {
        width: 700px;
      }
    }
    @media (max-width: 860px) {
      width: 100%;
    }
  }

  span {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; // 主轴居中
    align-items: center;     // 交叉轴居中
    color: @text;
    cursor: pointer;

    &.active {
      color: @light_bg;
      background-color: @hover_bg;
    }

  }

}